/* VForm2 样式修复 */

/* 只修复el-header和toolbar-header显示在一行 */
.v-form-designer ::v-deep .el-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.v-form-designer ::v-deep .toolbar-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 修复设计器容器高度问题 */
.v-form-designer {
  height: 100% !important;
  min-width: 1000px !important;
}

/* 确保设计器主体区域占满高度 */
.v-form-designer .designer-container {
  height: 100% !important;
  margin-top: 0 !important;
}

/* 修复工具栏区域不被遮挡 */
.form-widget-container {
  overflow: visible !important;
  height: 100% !important;
}

.widget-form-container {
  overflow: visible !important;
  height: 100% !important;
}

.widget-config-container {
  overflow: visible !important;
  height: 100% !important;
}

/* 修复标签页头部 */
.el-tabs__header {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.el-tabs__content {
  height: calc(100% - 40px) !important;
  overflow: auto !important;
  flex: 1;
}

/* 修复设计器中间区域 */
.designer-container {
  height: 100% !important;
  overflow: visible !important;
}

.designer-container .el-tabs {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 修复画布区域 */
.form-canvas {
  height: calc(100% - 60px) !important;
  overflow: visible !important;
  min-width: 400px !important;
  display: block !important;
}

/* 优化中间设计区域宽度 */
.widget-form-container .form-canvas {
  min-width: 600px !important;
  overflow: visible !important;
  display: block !important;
}

/* 确保中间操作区域完全显示 */
.widget-form-container {
  overflow: visible !important;
  display: block !important;
  height: 100% !important;
}

/* 确保PC/Pad/H5工具栏区域可见 */
.form-canvas .device-toolbar,
.form-canvas .toolbar-container,
.form-canvas .canvas-toolbar {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 50px !important;
}

/* 确保工具栏按钮不折行 */
.device-toolbar .el-button-group {
  white-space: nowrap !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

.device-toolbar .el-button-group .el-button {
  min-width: 60px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 确保PC/Pad/H5按钮组显示在一行 */
.v-form-designer .device-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* 确保所有工具栏元素在一行显示 */
.v-form-designer .toolbar-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* 确保PC/Pad/H5按钮区域完整显示 */
.device-toolbar {
  height: 50px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 确保中间操作区域不被隐藏 */
.widget-form-container .el-tabs__content {
  overflow: visible !important;
  height: auto !important;
  min-height: 400px !important;
}

/* 修复画布内容区域 */
.canvas-content {
  height: calc(100% - 50px) !important;
  overflow: auto !important;
}

/* 隐藏工具栏中的导入/导出相关按钮 */
.v-form-designer ::v-deep .toolbar-container .el-button[title="导入JSON"],
.v-form-designer ::v-deep .toolbar-container .el-button[title="导出JSON"],
.v-form-designer ::v-deep .toolbar-container .el-button[title="导出代码"],
.v-form-designer ::v-deep .toolbar-container .el-button[title="生成SFC"] {
  display: none !important;
}

/* 通过按钮组隐藏导入导出按钮组 */
.v-form-designer ::v-deep .toolbar-container .el-button-group:has(.el-button[title="导入JSON"]),
.v-form-designer ::v-deep .toolbar-container .el-button-group:has(.el-button[title="导出JSON"]),
.v-form-designer ::v-deep .toolbar-container .el-button-group:has(.el-button[title="导出代码"]),
.v-form-designer ::v-deep .toolbar-container .el-button-group:has(.el-button[title="生成SFC"]) {
  display: none !important;
}

/* 通过按钮文本内容隐藏（备用方案） */
.v-form-designer ::v-deep .toolbar-container .el-button:contains("导入JSON"),
.v-form-designer ::v-deep .toolbar-container .el-button:contains("导出JSON"),
.v-form-designer ::v-deep .toolbar-container .el-button:contains("导出代码"),
.v-form-designer ::v-deep .toolbar-container .el-button:contains("生成SFC") {
  display: none !important;
}

/* 通过按钮图标类名隐藏（如果按钮有特定图标） */
.v-form-designer ::v-deep .toolbar-container .el-button .el-icon-upload,
.v-form-designer ::v-deep .toolbar-container .el-button .el-icon-download,
.v-form-designer ::v-deep .toolbar-container .el-button .el-icon-document-copy,
.v-form-designer ::v-deep .toolbar-container .el-button .el-icon-files {
  display: none !important;
}

/* 隐藏包含特定图标的按钮 */
.v-form-designer ::v-deep .toolbar-container .el-button:has(.el-icon-upload),
.v-form-designer ::v-deep .toolbar-container .el-button:has(.el-icon-download),
.v-form-designer ::v-deep .toolbar-container .el-button:has(.el-icon-document-copy),
.v-form-designer ::v-deep .toolbar-container .el-button:has(.el-icon-files) {
  display: none !important;
}

/* 通过按钮的span文本内容隐藏（最通用的方法） */
.v-form-designer ::v-deep .toolbar-container .el-button span:contains("导入JSON"),
.v-form-designer ::v-deep .toolbar-container .el-button span:contains("导出JSON"),
.v-form-designer ::v-deep .toolbar-container .el-button span:contains("导出代码"),
.v-form-designer ::v-deep .toolbar-container .el-button span:contains("生成SFC") {
  display: none !important;
}

/* 隐藏包含特定文本的按钮 */
.v-form-designer ::v-deep .toolbar-container .el-button:has(span:contains("导入JSON")),
.v-form-designer ::v-deep .toolbar-container .el-button:has(span:contains("导出JSON")),
.v-form-designer ::v-deep .toolbar-container .el-button:has(span:contains("导出代码")),
.v-form-designer ::v-deep .toolbar-container .el-button:has(span:contains("生成SFC")) {
  display: none !important;
}

/* 通过按钮组的特定位置隐藏（如果按钮组有固定顺序） */
.v-form-designer ::v-deep .toolbar-container .el-button-group:nth-of-type(2) {
  display: none !important;
}
